<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE Template</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 定一个v-big，和v-text类似，但把绑定数据放大10倍 -->
    <div id="root">
        <h2>当前n值是：<span  v-text="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input type="text" v-fbind:value="n">
    </div>
</body>
    <script type="text/javascript">
        //全局指令
        Vue.directive('fbind',{
            bind(element,binding){
                console.log(this);//此处的this是window
                element.value = binding.value;
            },
            inserted(element,binding){
                element.focus();
            },
            update(element,binding){
                element.value = binding.value;
            }
        })

        const vm = new Vue({
            el:'#root',
            data:function(){
                return{
                    n:1
                }
            },
            //自定义指令
            directives:{
                //调用时机：
                //1.初次绑定时
                //2.指令所在模板被重新解析

                //函数式 就是bind和update结合的写法，如果不需要insert就不需要对象式
                big(element,binding){
                    //console.log(element,binding.value);
                    element.innerText = binding.value*10
                },
                // fbind(element,binding){
                //     element.value = binding.value;
                //     element.focus();
                // }

                // 对象式
                // fbind:{
                //     bind(element,binding){
                //         console.log(this);//此处的this是window
                //         element.value = binding.value;
                //     },
                //     inserted(element,binding){
                //         element.focus();
                //     },
                //     update(element,binding){
                //         element.value = binding.value;
                //     }
                // }
            },
            methods:{
              showInfo(event){
                  
              }
          }
        })
    </script>
</html>